<template>
  <div class="home">
    <div class="left-box">
      <span class="title-name">Welcome back,kakutousyou !</span>
      <span class="title-name2">Dashboard</span>
      <div class="make-friend">
        <div class="heard">
          <div class="heard-name">
            Make friends
          </div>
          <div class="view-all">
            View all >
          </div>
        </div>
        <div class="friend-card">
          <div v-for="item in friendList" :key="item.imgId" class="item-card">
            <div class="friend-body">
              <div class="imgs">
                <img :src="getImageUrl(item.imgId)">
              </div>
              <div class="name">
                {{ item.name }}
              </div>
              <div class="country">
                <img :src="getImageUrl(item.country)">
                <span>{{ item.country }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="projects-box">
        <div class="projects-heard">
          <div class="heard-name">
            Make friends
          </div>
          <div class="view-all">
            View all >
          </div>
        </div>
        <div class="projects-card" />
      </div>
    </div>
    <div class="right-box">
      <div class="rili">
        <div class="icons" />
        <span>JON 23,2024</span>
      </div>
      <div class="events-box">
        <div class="view-all">
          View All >
        </div>
      </div>
      <div class="latest-news">
        <div />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const friendList = ref([
  {
    imgId: 'friends1',
    name: 'KAKU',
    country: 'China',
  },
  {
    imgId: 'friends2',
    name: 'TOUSYOU',
    country: 'China',
  },
  {
    imgId: 'friends3',
    name: 'KUTOUS',
    country: 'China',
  },
  {
    imgId: 'friends4',
    name: 'KAYOU',
    country: 'China',
  },
  {
    imgId: 'friends5',
    name: 'KAKU',
    country: 'China',
  },
  {
    imgId: 'friends6',
    name: 'KAKUTOUSYOU',
    country: 'Vietnam',
  },
  {
    imgId: 'friends7',
    name: 'KAKUTOUSYOU',
    country: 'Korea',
  },
  {
    imgId: 'friends8',
    name: 'KAKUTOUSYOU',
    country: 'India',
  },
])

function getImageUrl(img: string): string {
  return new URL(`/src/assets/pic/${img}.png`, import.meta.url).href
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: auto;
  display: flex;

  .left-box {
    display: flex;
    flex-direction: column;
    margin-left: 180px;
    margin-top: 60px;

    .title-name {
      color: #8f8f8f;
      font-size: 17px;
    }

    .title-name2 {
      color: #0a1629;
      font-size: 39px;
      margin: 16px 0 16px 35px;
    }

    .make-friend {
      width: 850px;
      height: 511px;
      background: #ffffff;
      box-shadow: 0px 6px 58px 1px rgba(196, 203, 214, 0.1);
      border-radius: 24px 24px 24px 24px;
      display: flex;
      flex-direction: column;
      padding: 36px 17px 17px 17px;
      box-sizing: border-box;

      .heard {
        display: flex;
        justify-content: space-between;

        .heard-name {
          font-size: 23px;
          color: #0a1629;
        }

        .view-all {
          font-size: 17px;
          color: #3f8cff;
          cursor: pointer;
        }
      }

      .friend-card {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 20px;

        .item-card {
          display: flex;
          align-items: center;
          justify-content: center;
          background: #f4f9fd;
          border-radius: 24px 24px 24px 24px;

          .friend-body {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            .imgs{
              width: 40px;
              height: 40px;
              &>img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }
            .country{
              width: 100%;
              display: flex;
              justify-content: space-around;
              &>img{
                width: 25px;
                height: 25px;
              }
            }
          }
        }
      }
    }

    .projects-box {
      margin-top: 100px;
      width: 850px;
      display: flex;
      flex-direction: column;

      .projects-heard {
        display: flex;
        justify-content: space-between;

        .heard-name {
          font-size: 24px;
          color: #0a1629;
        }

        .view-all {
          font-size: 17px;
          color: #14161a;
        }
      }

      .projects-card {
        width: 850px;
        height: 718px;
        background: url("@/assets/pic/projectlist.png") no-repeat;
        background-size: 100% 100%;
        margin-left: -77px;
        margin-top: -71px;
      }
    }
  }

  .right-box {
    display: flex;
    flex-direction: column;
    margin-left: 100px;

    .rili {
      width: 280px;
      height: 48px;
      background: #408BF8;
      display: flex;
      align-items: center;
      padding-left: 15px;
      box-sizing: border-box;
      border-radius: 15px;
      margin-top: 60px;
      margin-bottom: 65px;
      justify-content: space-around;

      .icons {
        width: 24px;
        height: 24px;
        background: url("@/assets/pic/rili.png") no-repeat;
        background-size: 100% 100%;
      }

      &>span {
        font-size: 16px;
        color: #FFFFFF;
      }
    }
  }

  .events-box {
    position: relative;
    margin-top: -70px;
    margin-left: -90px;
    width: 500px;
    height: 600px;
    background: #FFFFFF;
    border-radius: 10px;
    background: url("@/assets/pic/nearestEvents.png") no-repeat;
    background-size: 100% 100%;
    .view-all{
      position: absolute;
      right: 120px;
      top: 105px;
      font-size: 16px;
      color: #000000;
    }
  }

  .latest-news {
    width: 339px;
    height: 455px;
    background: #FFFFFF;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    margin-top: 40px;
    &>div {
      width: 90%;
      height: 90%;
      background: url("@/assets/pic/latestnews.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
